/**
 * 首页
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { TabBar, AddrView, AddrList } from 'app/components'
import { Title } from '../../components/common'
import CarPrefixList from '../../components/carPrefixList/pro';

import * as homeActions from '../../actions/homeActions'
import {
    InputItem,
    CarInputItem
} from '../../components/home'

import '../../../styles/home.scss';
import common from '../../utils/common'
import { Toast } from 'antd-mobile'
import style from './index.scss'

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowPreFix: false,  //车牌前缀显
            carPrefixName: '粤A', //默认车牌前缀
            car: {
                carNumberSuffix: "",
                carNumPrefix: "粤A",
                carCode: ""                
            },
            tabBar: {
                selectedIndex: 0, // 选中的tab下标
                isFixed: true, // 是否固定在底部
                list: [
                    {
                        pagePath: "/", // 页面跳转路由
                        text: "车辆年检",  // tab文案
                        iconPath: "./images/visaNav.png", //默认图标
                        selectedIconPath: "./images/visaNav_s.png",  // 选中图标
                    },
                    {
                        pagePath: "orderList",
                        text: "我的订单",
                        iconPath: "./images/orderNav.png",
                        selectedIconPath: "./images/orderNav_s.png",
                    },
                ]
            }
        };
    }

    componentWillMount() {
        common.setViewTitle('车辆年检');
    }

    componentDidMount() {
        // 请求默认地址数据
        this.props.homeActions.getDefaultAddressAsync({}, (result) => {
            console.log('——————————',result);
        })

        //通过车牌前缀获取办理条件
         this.props.homeActions.getConditionAsync({},()=>{})
    }

    // 地址预览组件点击
    addressClick() {
        this.props.router.push('addressList');
    }

    // tab点击
    tabClick(index) {
        let { tabBar } = this.state;
        let { list } = tabBar;
        console.log(list, index, list[index].pagePath)
        this.props.router.replace(list[index].pagePath);
    }
    
    //用户修改车牌前缀后保存车牌前缀
    getName(name) {
        if (name == 1) {
            this.setState({
                isShowPreFix: true,
            })
        } else if (name) {
            this.setState({
                isShowPreFix: false,
                carPrefixName: name,
            })
        } else if (!name) {
            this.setState({
                isShowPreFix: false,
            })
        }
    }
    render() {
        let { tabBar, car} = this.state;
        let { defaultAddress } = this.props
        let conditions = "1、车辆注册日期在2013-11-10~2017-11-10之间的车辆。\n2、无未处理的交通违法。\n3、限定5座（包含5座）以下的蓝牌车。\n4、有效期内的交强险。\n";
        let { carCode, carNumPrefix, carNumberSuffix} = car;
        return (
            <div className={style.home}>
                {/*顶部说明-start-*/}
                <div className={style.topExplain}>
                    <img src='./images/tag_icon.png' className={style.labeling}></img>
                    <div className={style.explainText}>
                        <div>新车六年免检服务</div>
                        <div className={style.choiceImg}>
                            <img src='./images/choice_icon.png' className={style.sign}></img>
                            邮政速递上门服务,足不出户办理车辆年检
                        </div>
                        <div className={style.choiceImg}>
                            <img src='./images/choice_icon.png' className={style.sign}></img>
                            支持广东省内各地市              
                        </div>

                    </div>
                </div>
                {/*顶部说明-end-*/}

                <div style={{height: '.24rem'}}></div>
                {/*办理条件-start-*/} 
                <Title text='办理条件' isLine={true}/>
                <div className={style.conditionView}>
                    <div className={style.listBox}>
                        <div className={style.conditionsText}>{conditions}</div>
                    </div>
                </div>
                {/*办理条件-end-*/} 
                <div style={{height: '.24rem'}}></div>
                {/*车辆信息-start-*/}
                <Title text='车辆信息' isLine={true}/>
                <div className={style.inputItem}>
                    <InputItem type="text" index='2' itemText="车牌号码" maxLength="6" placeHolder="请输入车牌号码" id='carNumber'
                        isShowPreFix = {true} value={this.state.carNumber} showUnderLine={true} showTagText={true}  creditCodeImg={this.state.carNumberImg} creditWidth = {this.state.carNumberWidth}
                        preFixName = {this.state.carPrefixName}
                        isShowPreFixEvent = {()=>{
                            this.setState({
                                isShowPreFix: !this.state.isShowPreFix
                            })
                        }}
                        onClick={()=>{
                            this.setState({
                                carNumber: '',
                                carNumberImg: 'hideDelete',
                                carNumberNoBlur: false
                            })
                            document.querySelector('#carNumber').focus()
                        }}
                        onBlur={(event)=>{
                            let res = event.target.value;
                            this.setState({carNumberNoBlur: true});
                            setTimeout(()=>{
                                if(!this.state.carNumberNoBlur) return;  //点击删除按钮不执行验证
                                let value = res,
                                    carNumberRule= /^[a-zA-Z0-9]{4}[a-zA-Z0-9\u4E00-\u9FA5]{1,2}$/;

                                if(value == ''){
                                    this.setState({
                                        carNumberImg: '',
                                    });
                                }else if(carNumberRule.test(value)){
                                    this.setState({
                                        carNumberImg: 'correct',
                                        carNumberWidth: '.4rem'
                                    });
                                }else {
                                    this.setState({
                                        carNumberWidth: '.4rem',
                                        carNumberImg: 'error'
                                    })
                                }
                            },0)
                        }}

                        onFocus={(e)=>{
                            window.scrollTo(0, 150);
                            //document.body.scrollTop = document.body.scrollHeight;
                            let value = e.target.value;
                            if(value.length!=0&&value==this.state.carNumber){
                                this.setState({
                                    carNumberImg: 'showDelete',
                                });
                            }

                        }}

                        onChange={(e) => {
                            let value = e.target.value;
                            if(value.length>0&&value!=' '){
                                this.setState({
                                    carNumberImg: 'showDelete',
                                    carNumber: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
                                });
                            }else {
                                this.setState({
                                    carNumberImg: 'hideDelete',
                                    carNumber: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
                                });
                            }
                    }}/>
                    <InputItem type="text" index='2' itemText="车身架号" maxLength="6" placeHolder="请输入车身架号后6位" id='carCode'
                         value={this.state.carCode} showUnderLine={true} showTagText={true}  creditCodeImg={this.state.carCodeImg} creditWidth = {this.state.carCodeWidth}
                                    onClick={()=>{
                                        this.setState({
                                            carCode: '',
                                            carCodeImg: 'hideDelete',
                                            carCodeNoBlur: false
                                        })
                                        document.querySelector('#carCode').focus()
                                    }}
                                    onBlur={(event)=>{
                                        let res = event.target.value;
                                        this.setState({carCodeNoBlur: true});
                                        setTimeout(()=>{
                                            if(!this.state.carCodeNoBlur) return;  //点击删除按钮不执行验证
                                            let value = res,
                                                carCodeRule = /^[a-zA-Z0-9]{6}$/;

                                            if(value == ''){
                                                this.setState({
                                                    carCodeImg: '',
                                                });
                                            }else if(carCodeRule.test(value)){
                                                this.setState({
                                                    carCodeImg: 'correct',
                                                    carCodeWidth: '.4rem'
                                                });
                                            }else {
                                                this.setState({
                                                    carCodeWidth: '.4rem',
                                                    carCodeImg: 'error'
                                                })
                                            }
                                        },0)
                                    }}

                                    onFocus={(e)=>{
                                        window.scrollTo(0, 150);
                                        let value = e.target.value;
                                        if(value.length!=0&&value==this.state.carCode){
                                            this.setState({
                                                carCodeImg: 'showDelete',
                                            });
                                        }

                                    }}

                                    onChange={(e) => {
                                        let value = e.target.value;
                                        if(value.length>0&&value!=' '){
                                            this.setState({
                                                cardIdImg: 'showDelete',
                                                cardId: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
                                            });
                                        }else {
                                            this.setState({
                                                cardIdImg: 'hideDelete',
                                                cardId: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
                                            });
                                        }
                    }}/>
                        
                </div>
                {/*车辆信息-end-*/}
                
                <div style={{height: '.24rem'}}></div>

                {/*地址预览*/}
                <AddrView {...defaultAddress} handleClick={() => this.addressClick()} />
                {/*底部固定tab*/}
                <TabBar {...tabBar} tabClick={(index) => this.tabClick(index)} />


                <CarPrefixList
                    getName={(name)=> this.getName(name)}
                    isShowPreFix={this.state.isShowPreFix}
                    // list={this.state.list}
                />

            </div>
        )
    }
}

const mapStateToProps = state => ({
    // addressList: state.addressList,
    defaultAddress: state.defaultAddress,
})

const mapDispatchToProps = dispatch => ({
    homeActions: bindActionCreators(homeActions, dispatch),
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Test);

